<template>
	<view class="reminder-box">
		<view class="every-box-reminder" v-for="(item,index) in taskList" :key="index">
			<view class="each-reminder">
				<view class="content-box">
					<view class="left-box">
						<text class="basic-name">{{item.indicName}}+</text>
						<view class="numerical-information">
							<dev-svg-image mode="image" :imageUrl="item.indicIcon" width="70" height="70">
							</dev-svg-image>
							<view class="data-information">
								<view class="every-data">
									<view class="data-name">
										{{item.indicData.firstDesc ||''}}
									</view>
									<view class="data-value">
										{{item.indicData.firstValue ||'今日未记录'}}{{item.indicData.firstUnit ||''}}
									</view>
								</view>
								<view class="every-data" v-show="item.indicData.secondValue">
									<view class="data-name">
										{{item.indicData.secondDesc}}
									</view>
									<view class="data-value">
										{{item.indicData.secondValue}}{{item.indicData.secondUnit}}
									</view>
								</view>

							</view>

						</view>
					</view>
					<view class="vertical-split-line"></view>
					<view class="">
						<dev-button :bgColor="item.remindFlag ==1 || item.recordFlag==1?'#E2E1E2':'#2EA7E0'" :disabled="item.remindFlag ==1 || item.recordFlag==1" width="130" height="50" @tapDev="remindTx(item.indicId)">
						{{item.recordFlag==1?'已记录':item.remindFlag==1?'已提醒':'去提醒'}}
						</dev-button>
					</view>
				</view>
			</view>
		</view>
		
		<nodata v-if="taskList.length==0 || !taskList"></nodata>

	</view>
</template>

<script>
	export default {
		name: 'health-reminder', //健康提醒
		props: {
			//查询任务时间
			taskDate: {
				type: String,
				default: ''
			},
			//其他用户id
			otherUserId: {
				type: [String, Number],
				default: '',
			}
		},
		data() {
			return {
				taskList: [], //任务列表
			}
		},
		watch: {
			taskDate(newValue, oldValue) {
				this.healthTask();
			},
			otherUserId(newValue, oldValue) {
				this.healthTask();
			}
		},
		created() {
			this.healthTask(); //获取健康计划
		},
		methods: {
			//获取家人健康任务列表
			healthTask() {
				let _this = this;
				//如果没有获取到日期，不请求接口
				if (!this.taskDate || !this.otherUserId) return
				this.taskList = [];
				this.$api.get(global.apiUrls.userHealthStatistics, {
					recordTime: this.taskDate, //日期
					userId: global.userInfo.userId, //当前用户id
					familyUserId: this.otherUserId, //其他用户id
				}).then(res => {
					if (res.data.code === 1000) {
						let result = res.data.result.userHealthDataStaVOS;
						console.log(result, 5300000)
						for (let i = 0; i < result.length; i++) {
							if (result[i].indicData != null && result[i].indicName == '睡眠') {
								result[i].indicData = JSON.parse(result[i].indicData)
								result[i].indicData.firstValue = _this.$basejs.formatMinutes(result[i].indicData
									.firstValue)
							} else {
								result[i].indicData = JSON.parse(result[i].indicData)
							}
						}
						this.taskList = result;
					}
				})
			},
			//去提醒
			remindTx(serviceId) {
				let fdata = {
					memberId: this.otherUserId, //被提醒id
					adviserId: global.userInfo.userId, //自己id 
					remindType: 2, //2健康数据  3健康任务
					serviceId: serviceId, //指标id
					typeId: '', //提醒类型id
					recordTime: this.taskDate
				}
				let _this = this;
				this.$api.post(global.apiUrls.remindTx, fdata)
					.then(res => {
						if (res.data.code == 1000) { //提醒完成
							this.healthTask();
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});

						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
						}
					}).catch(err => {})
			},
		}
	}
</script>

<style lang="scss">
	.reminder-box {
		padding: 1rpx 20rpx;
	}

	.every-box-reminder {
		background-color: #fff;
		margin-top: 46rpx;

		.each-reminder {
			padding: 23rpx;
			width: 710rpx;
			height: 229rpx;
			background-image: url('http://static.bsyjk.cn/shoppingMall/35BCA1BD5DBE46D3B3E469A71B5BCBB6.png');
			background-size: 100% 100%;

			.content-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 22rpx;
				width: 670rpx;
				height: 178rpx;
				background-color: #fff;
				border-radius: 16rpx;

				.left-box {
					min-width: 450rpx;

					.basic-name {
						padding: 8rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
						background-color: #FF8F1F;
						border-radius: 4rpx;
					}

					.numerical-information {
						margin-top: 20rpx;
						display: flex;
						align-items: center;

						.data-information {
							display: flex;
							align-items: center;

							.every-data {
								margin-left: 30rpx;
							}

							.data-name {
								font-size: 24rpx;
							}

							.data-value {
								margin-top: 10rpx;
								font-size: 34rpx;
							}
						}
					}
				}

				.vertical-split-line {
					height: 130rpx;
					border-left: 1rpx solid #E2E1E2;
				}

			}
		}
	}
</style>
